<template>
    <ve-line
            :data="chartData"
            :judge-width="true"
            width="100%"
            height="100%"

            :yAxis="yAxis"
            :settings="settings"
            :extend="chartExtend"
    ></ve-line>
</template>

<script>
    import api from '../../api'
    export default {
        data () {
            this.settings={
                xAxisType:'allhoursmon',
                metrics: ['总话务量', '语音应答','客户接通','呼损量'],
                dimension: ['时刻']
            }
            this.chartExtend = {
                legend:{
                    right:10,
                    top:10,
                    type: 'scroll',
                    textStyle:{
                        fontSize:14,
                        color:'#fff'
                    }
                },
                xAxis:{
                    type:'value',
                    min:0,
                    max:24,
                    minInterval:1,
                    splitNumber:24,
                    axisLabel:{
                        color:'#fff',
                        fontSize:14,
                        interval: 0,
                        showMinLabel:true
                    },
                    axisLine :{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    },
                    splitLine: {
                        show:false,
                        lineStyle:{
                            color:'#0090ff',
                            type:'dotted'
                        }
                    }
                },

                grid:{
                    bottom:12,

                    barWidth:10
                },
                series: {
                    barWidth: 40
                }
            }
            return {
                chartData: {
                    columns: ['时刻', '总话务量', '语音应答','客户接通','呼损量'],
                    rows: [
                        /*{ '时刻': '00:00:00', '总话务量': 1393 ,'语音应答':1253,'客户接通':2855,'呼损量':2346},
                        { '时刻': '01:00:00', '总话务量': 1393 ,'语音应答':1253,'客户接通':2855,'呼损量':2346},
                        { '时刻': '02:00:00', '总话务量': 3530 ,'语音应答':1213,'客户接通':2555,'呼损量':2376},*/
                        /*{ '时刻': 0, '总话务量': 2923 ,'语音应答':1023,'客户接通':2055,'呼损量':2036},
                        { '时刻': 3, '总话务量': 2923 ,'语音应答':1023,'客户接通':2055,'呼损量':2036},
                        { '时刻': 4, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 5, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 6, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 7, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 8, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 9, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 10, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 11, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 12, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 13, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 14, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 15, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 16, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 17, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 18, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 19, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 20, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 21, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},
                        { '时刻': 22, '总话务量': 1723 ,'语音应答':1230,'客户接通':2535,'呼损量':2360},*/
                    ],
                },
                yAxis:{
                    type: 'value',
                    name: '单位/个',
                    min: 0,
                    nameTextStyle:{
                        color:'#fff',
                        fontSize:14,
                        align:'right',
                        padding:[0,0,12,0]
                    },
                    splitLine: {
                        lineStyle:{
                            color:'#0090ff',
                            type:'dotted'
                        }
                    },
                    axisLabel:{
                        color:'#fff',
                        fontSize:14
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    }


                }
            }
        },
        created(){
            this.refresh()
        },
        methods:{
            async refresh(){
                this.chartData = await api.getAllhoursmon();
            }
        }
    }
</script>
